<template>
	<view class="homePage">
		<view class="uni-list homeList" v-if="list.length > 1">
			<block v-for="(item,index) in list" :key="index">
				<view class="homeItem uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(item)">
					<view class="itemLeft">
						<image :src="item.coverImage" mode=""></image>
					</view>
					<view class="itemRight">
						<view class="name">
							{{item.name}}
						</view>
						<view class="priceWrap">
							<view class="price">
								￥
								<span>{{ item.price / 100 }}</span>
								<span class="originalPrice">￥{{ item.originalPrice / 100 }}</span>
							</view>

							<view class="sale">
								<span>已售 {{ item.totalSaleCount }}</span>
							</view>
						</view>
					</view>
				</view>
			</block>

			<!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->
			<!-- <view class="uni-loadmore loadfinished" v-if="finished">--没有更多数据了--</view> -->
		</view>

		<proDetailComponent ref="detailComponent" v-if="list.length == 1" :productId="list[0].productId">
		</proDetailComponent>

		<view class="noData" v-if="list.length == 0">
			老板还没把拼团商品准备好<br>喝杯咖啡再来看看
		</view>
		<!-- //微信授权一键登录 -->
		<uni-popup :show="type === 'middle'" position="middle" mode="fixed" @hidePopup="togglePopup('')">
			<button type="default" open-type="getUserInfo" @getuserinfo="loginWechat"
				class="loginWechatBtn">微信授权一键登录</button>
		</uni-popup>
		<!-- //恭喜您拼团成功啦 -->
		<view class="confirmPopup" v-if="showPopup">
			<view class="content">
				<image v-if="bingo" src="../../../static/img/zan.png" mode="" class="zanImg"></image>
				<image v-else src="../../../static/img/fail.png" mode="" class="zanImg"></image>
				<!-- <button type="warn" @click="goMyOrder" class="goMyOrderBtn">查看我的订单</button> -->
			</view>
		</view>
		<trun v-show="jackpotShow" @jackpot="jackpot" ref="jackpot"></trun>

	</view>
</template>

<script>
	import API from '@/common/api';
	import utils from '@/common/utils';
	import proDetailComponent from '@/pages/components/proDetailComponent.vue';
	import uniPopup from '@/pages/components/uni-popup/uni-popup.vue';
	import trun from '@/components/trun.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		data() {
			return {
				loading: false,
				finished: false,
				loadMoreText: '加载中...',
				srcPopup: "",
				showLoadMore: false,
				bingo: false,
				confirmId: null,
				showPopup: false,
				jackpotShow: false,
				list: [],
				title: '玖玖优拼',
				params: {
					enable: 1,
					page: 0,
					limit: 10
				},
				type: '',
				indexTimerInterval: null
			};
		},
		components: {
			proDetailComponent,
			uniLoadMore,
			trun,
			uniPopup
		},
		onLoad(options) {
			console.log(options, "homePage")
			setTimeout(() => {
				if (options.scene) {
					uni.setStorageSync('scene', options.scene)
				}
				// #ifdef MP-WEIXIN
				let page = wx.getLaunchOptionsSync()
				console.log(page, "homePage")
				if (page.query && page.query.scene) {
					uni.setStorageSync('scene', page.query.scene)
				}
				// #endif
			}, 1000)
		},
		onHide() {
			console.log('index onHide', this.timerInterval)
			if (this.$refs.detailComponent) {
				this.$refs.detailComponent.hide()
			}
			if (this.indexTimerInterval) {
				clearInterval(this.indexTimerInterval)
			}
		},
		onShow() {
			console.log('index onShow')
			this.getProductList();
			console.log(this.$refs.detailComponent)
			if (this.$refs.detailComponent) {
				this.$refs.detailComponent.refresh()
				this.$refs.detailComponent.show()
			}
			this.groupbuyOrderNotify()
			this.timer()
		},
		onUnload() {
			this.list = [];
			this.loadMoreText = '加载更多';
			this.showLoadMore = false;
		},
		onPullDownRefresh() {
			this.params.page = 0;
			this.getProductList();
			console.log(this.$refs.detailComponent)
			if (this.$refs.detailComponent) {
				this.$refs.detailComponent.refresh()
			}
			this.groupbuyOrderNotify()
		},
		onReachBottom() {
			console.log('onReachBottom');
			if (!this.finished) {
				this.showLoadMore = true;
				setTimeout(() => {
					this.params.page++;
					this.getProductList();
				}, 300);
			}
		},
		onShareAppMessage() {
			return {
				title: this.title,
				imageUrl: this.list.length > 0 ? this.list[0].shareCoverImage : '',
				path: '/pages/tabbar/homePage/index?scene=' + uni.getStorageSync('uid')
			}
		},
		onShareTimeline() {
			return {
				title: this.title,
				imageUrl: this.list.length > 0 ? this.list[0].shareCoverImage : '',
				path: '/pages/tabbar/homePage/index?scene=' + uni.getStorageSync('uid')
			}
		},
		methods: {
			async groupbuyOrderNotify() {
				let json = await API.groupbuyOrderNotify({
					hideLoading: true
				});
				if (json.code == 200) {
					console.log(json, "5555groupbuyOrderNotify")
					if (json.data && json.data.length > 0) {
						this.jackpotShow = true
						this.confirmId = json.data[0].id
						this.bingo = json.data[0].bingo
						this.$nextTick(() => {
							this.$refs.jackpot.getLottery(this.bingo ? 1 : 2)
						})

					} else {
						this.showPopup = false
						this.jackpotShow = false
					}
				}
			},
			jackpot() {
				this.groupbuyOrderConfirm();
				this.jackpotShow = false
				this.showPopup = true
				setTimeout(() => {
					this.showPopup = false
				}, 2500)
			},
			async groupbuyOrderConfirm() {
				if (this.confirmId) {
					let json = await API.groupbuyOrderConfirm({
						targetId: this.confirmId,
					});
				}
			},
			goDetail(item) {
				const value = uni.getStorageSync('token');
				if (!value) {
					this.togglePopup('middle');
				} else {
					console.log(item, "goDetail的item")
					uni.navigateTo({
						url: './productDetail?productId=' + item.productId
					});
				}
			},
			togglePopup(type) {
				this.type = type;
				console.log('弹框显示或关闭');
				if ('middle' != this.type) {
					this.getProductList();
				}
			},
			closePopup() {
				this.$refs.confirmPopup.hide()
			},
			timer() {
				this.indexTimerInterval = setInterval(() => {
					if (uni.getStorageSync('uid') && !this.jackpotShow && !this.showPopup) {
						this.groupbuyOrderNotify()
					}
				}, 5000, 5000)
				console.log(this.indexTimerInterval, 'this.indexTimerInterval');
			},
			//获取用户信息
			loginWechat(callback) {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log(loginRes, 'uni.login');
						uni.getUserInfo({
							provider: 'weixin',
							success: infoRes => {
								console.log(infoRes, 'getUserInfo')
								//1小程序登录 waLogin
								this.params.jsCode = loginRes.code;
								this.params.avatar = infoRes.userInfo.avatarUrl;
								this.params.gender = infoRes.userInfo.gender === 2 ? 'female' :
									'male';
								this.params.name = infoRes.userInfo.nickName;
								this.params.encryptedData = infoRes.encryptedData;
								this.params.iv = infoRes.iv;
								this.params.inviteUserId = uni.getStorageSync('scene');
								API.waLogin(this.params).then(res => {
									console.log(res, '登录成功');
									uni.setStorageSync('token', res.data.token);
									uni.setStorageSync('uid', res.data.id);
									this.togglePopup('close');
								});
							}
						});
					}
				});
			},
			getProductList() {
				API.productList(this.params).then(res => {
					// console.log(res)
					if (res.code == 200) {
						let json = res;
						uni.hideLoading();
						// console.log(json)
						if (0 == this.params.page) {
							this.list = []
						}
						for (let i = 0; i < json.data.length; i++) {
							this.list.push({
								coverImage: json.data[i].coverImage,
								name: json.data[i].name,
								price: json.data[i].price,
								originalPrice: json.data[i].originalPrice,
								totalSaleCount: json.data[i].totalSaleCount,
								productId: json.data[i].id,
							});
						}
						// console.log(this.list)

						// 加载状态结束
						this.loading = false;
						if (json.data.length < this.params.limit) {
							this.finished = true;
						}
						console.log(this.list)
						uni.stopPullDownRefresh();
					} else if (res.status == 401) {
						this.togglePopup('middle');
					}
				});
			}
		}
	};
</script>
<style>
	/* 	.homePage .uni-popup-middle.uni-popup-fixed{
		padding: 0;
	} */
</style>
<style lang="less">
	.homePage {
		// display: flex;
		// align-items: center;
		// justify-content: center;
		// min-height: 100vh;

		.homeList {
			.homeItem {
				background: white;
				// border: 1px solid red;
				box-sizing: border-box;
				// display: flex;
				// justify-content: space-between;

				.itemLeft {
					// border: 1px solid green;
					// width: 50%;

					image {
						width: 100%;
					}
				}

				.itemRight {
					.name {
						// border: 1px solid red;
						height: 70rpx;
						line-height: 70rpx;
						padding-left: 14rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 80%;
					}

					.priceWrap {
						background: white;
						display: flex;
						justify-content: space-between;
						padding: 20rpx 14rpx;

						.price {
							color: red;

							span {
								font-size: 30px;
							}

							.originalPrice {
								color: rgba(187, 187, 187, 1);
								font-size: 14px;
								margin-left: 14px;
								text-decoration: line-through;
							}
						}

						.sale {
							color: gray;
							font-size: 14px;
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}

		.noData {
			width: 100%;
			color: #888888;
			font-size: 16px;
			padding-top: 50%;
			text-align: center;
			line-height: 200%;
		}

		.uni-popup-middle {
			width: 70%;
		}

		.uni-popup-middle.uni-popup-fixed {
			padding: 30px 20px;
		}

		.loginWechatBtn {
			padding-left: 36px;
			padding-right: 36px;
			background: dodgerblue;
			color: white;
		}

		.confirmPopup {
			position: fixed;
			z-index: 998;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.9);
			display: flex;
			align-items: center;

			.content {
				border-radius: 20upx;
				position: fixed;
				display: flex;
				flex-direction: column;
				// background: white;
				left: 0;
				right: 0;
				// bottom: 0;
				width: 80%;
				margin: 0 auto;
				align-items: center;

				.zanImg {
					width: 300px;
					height: 300px;
					position: absolute;
					// background: #C94E00;
					opacity: 1;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					animation: change 0.5s;
					-moz-animation: change 0.5s;
					-webkit-animation: change 0.5s;
					-o-animation: change 0.5s;
				}

				@keyframes change {
					from {
						width: 100px;
						height: 100px;
						opacity: 1;
					}

					to {
						width: 300px;
						height: 300px;
						opacity: 1;
					}
				}

				h3 {
					text-align: center;
					margin: 10px;
				}

				.goMyOrderBtn {
					padding-left: 36px;
					padding-right: 36px;
					margin-bottom: 20px;
					position: fixed;
					bottom: 90px;
				}
			}
		}





	}
</style>
